<template>
  <div class="content-block">
    <div class="content-main">
      <div class="content-title">
        <div class="title-text-dot">枚举列表</div>
        <div class="title-handle">
          <div class="handel-item">
            <el-button type="primary" size="mini" @click="handleAdd">新 增</el-button>
          </div>
          <div class="handel-item">
            <el-select
              v-model="enumType"
              filterable
              placeholder="请选择"
              size="mini"
              @change="changData"
            >
              <el-option
                v-for="item in enumList"
                :key="item.enumValue"
                :label="item.enumName"
                :value="item.enumValue"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <el-table
        :data="enumTypeList"
        border
        size="mini"
        v-loading="tableLoading"
        height="calc(100vh - 230px)"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" :index="indexMethod" align="center" width="50"></el-table-column>
        <el-table-column label="枚举名称" prop="enumName"></el-table-column>
        <el-table-column label="枚举值" prop="enumValue"></el-table-column>
        <el-table-column label="枚举类型" prop="enumType"></el-table-column>
        <el-table-column label="排序" prop="seq"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              title="编辑"
              class="text-blue"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              title="删除"
              class="text-red"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
      <!--操作弹窗-->
      <el-dialog
        :title="handleTitle"
        :visible.sync="handleVisible"
        width="35%"
        center
        :close-on-click-modal="false"
      >
        <el-form
          ref="enumForm"
          :model="enumForm"
          :rules="enumFormRule"
          status-icon
          label-width="90px"
          size="small"
        >
          <el-form-item label="枚举名称" prop="enumName">
            <el-row>
              <el-col :span="24">
                <el-input v-model="enumForm.enumName" type="text"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="枚举值" prop="enumValue">
            <el-row>
              <el-col :span="24">
                <el-input v-model="enumForm.enumValue" type="text"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="排序码" prop="seq">
            <el-row>
              <el-col :span="24">
                <el-input v-model="enumForm.seq" type="text"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleVisible=false" size="mini">取 消</el-button>
          <el-button type="primary" @click="handleSave" size="mini">保 存</el-button>
        </div>
      </el-dialog>
      <!-- 删除弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        title="删除枚举"
        :visible.sync="delVisible"
        width="260px"
        center
      >
        <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="delVisible = false">取 消</el-button>
          <el-button size="mini" type="danger" @click="deleteRow">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    const vm = this;
    let checkSortCode = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("排序码不为空"));
      } else if (!vm.regExNumber(value)) {
        return callback(new Error("请输入非负整数"));
      } else {
        callback();
      }
    };
    return {
      current: 1,
      pageSize: 10,
      total: 0,
      enumId: "",
      enumType: "",
      tableLoading: false,
      handleTitle: "",
      handleVisible: false,
      delVisible: false,
      enumList: [],
      enumForm: {
        enumName: "",
        enumValue: "",
        enumType: "",
        seq: "",
        parentId: ""
      },
      enumFormRule: {
        enumName: [
          { required: true, message: "请输入枚举名称", trigger: "blur" }
        ],
        enumValue: [
          { required: true, message: "请输入枚举值", trigger: "blur" }
        ],
        seq: [
          {
            required: true,
            validator: checkSortCode,
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      enumTypeList: state => state.enumManage.enumTypeList
    })
  },
  mounted() {
    this.getData();
  },
  methods: {
    ...mapActions("enumManage", [
      "getEnumList",
      "getEnumByType",
      "addEnum",
      "editEnum",
      "delEnum"
    ]),
    indexMethod(index) {
      return (this.current - 1) * this.pageSize + 1 + index;
    },
    async getData() {
      const vm = this;
      let res = await vm.getEnumList(vm);
      vm.enumList = res;
      if (res.length > 0) {
        vm.enumType = res[0].enumValue;
        vm.getEnumType();
      }
    },
    getEnumType() {
      const vm = this;
      vm.tableLoading = true;
      vm.getEnumByType(vm);
    },
    changData(val) {
      this.enumType = val;
      this.getEnumType();
    },
    resetForm() {
      const vm = this;
      vm.enumForm = {
        enumName: "",
        enumValue: "",
        enumType: "",
        seq: "",
        parentId: ""
      };
      vm.$nextTick(() => {
        vm.$refs.enumForm.clearValidate();
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getEnumType();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getEnumType();
    },
    handleAdd() {
      const vm = this;
      vm.resetForm();
      vm.handleVisible = true;
      vm.handleTitle = "新增枚举";
      vm.enumForm.enumType = vm.enumType;
    },
    handleEdit(row) {
      const vm = this;
      vm.resetForm();
      vm.handleVisible = true;
      vm.handleTitle = "编辑枚举";
      vm.enumForm = {
        enumId: row.enumId,
        enumName: row.enumName,
        enumValue: row.enumValue,
        enumType: row.enumType,
        seq: row.seq,
        parentId: row.parentId
      };
    },
    handleDelete(row) {
      this.enumId = row.enumId;
      this.delVisible = true;
    },
    deleteRow() {
      this.delEnum(this);
    },
    handleSave() {
      const vm = this;
      vm.$refs["enumForm"].validate(valid => {
        if (valid) {
          if (vm.handleTitle === "新增枚举") {
            vm.addEnum(vm);
          } else {
            vm.editEnum(vm);
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
